<template>
  <div class="main" style="height: 100%" id="main" ref="main">
    <el-row style="margin-bottom: 0px; margin-top: 20px">
      <el-col :span="6" :offset="5">
        <span>计划完成情况</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="1">
        <div class="white" style="padding-top: 20px; height: 100px">
          <biaoqian :xiang="xiang1" :zhanbi="zhanbi1" />
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class="white" style="padding-top: 20px; height: 100px">
          <biaoqian1 :xiang="xiang2" :zhanbi="zhanbi2" />
        </div>
      </el-col>
      <el-col :span="1" :offset="1"
        ><el-divider direction="vertical" id="ll"></el-divider
      ></el-col>

      <el-col :span="10"
        ><div class="white" id="yuanzhu1">
          <yuanzhutext
            :width="width"
            :height="heightyz"
            :color="color3"
            :data1="xdata1"
            :data2="ydata1"
            :text="testyuazhu"
          /></div
      ></el-col>
    </el-row>

    <el-row>
      <el-col :span="8" :offset="1">
        <div id="p1">
          <yuanzhu
            :width="width1"
            :height="height1"
            :mc="mc2"
            :color="color3"
            :data1="xdata2"
            :data2="ydata2"
            :text="text4"
          />
        </div>
      </el-col>
      <el-col :span="1" :offset="2">
        <div class="black"></div>
      </el-col>
      <el-col :span="10"
        ><div>
          <maturityStatistics2
            :ydata1="mdata1"
            :ydata2="mdata2"
            :xdata1="mdata4"
          /></div
      ></el-col>
    </el-row>

    <el-row style="margin-bottom: 0px">
      <el-col :span="8" :offset="1">
        <div>
          <shanxingtu
            :myChart="shanxingtu1"
            :width="shanwidth"
            :height="height"
            :type="type"
            :color="color1"
            :data1="datayuan1"
            :text="text1"
          />
        </div>
      </el-col>
      <el-col :span="2" :offset="2">
        <div>
          <el-divider direction="vertical" id="e1"></el-divider>
        </div>
      </el-col>
      <el-col :span="9"
        ><div>
          <shanxingtu
            :myChart="shanxingtu2"
            :width="shanwidth"
            :height="height"
            :color="color2"
            :data1="datayuan2"
            :text="text2"
          /></div
      ></el-col>
    </el-row>
    <el-row style="margin-top: 0px">
      <el-col :offset="10">
        <div style="margin-left: 30px">
          <el-button @click="down" type="primary"> 下载 </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import biaoqian from "./com/biaoqian.vue";
import biaoqian1 from "./com/biaoqian1.vue";
import yuanzhu from "./com/yuanzhu.vue";
import shanxingtu from "./com/shanxingtu.vue";
import maturityStatistics2 from "./com/maturityStatistics2.vue";
import yuanzhutext from "./com/yuanzhutext.vue";
import html2canvas from "html2canvas";

import {
  performance,
  pcRate,
  keySkill,
  allocated,
  scFunds,
  fundsAllocated,
} from "api/echar";
export default {
  components: {
    biaoqian,
    biaoqian1,
    yuanzhu,
    shanxingtu,
    maturityStatistics2,
    yuanzhutext,
  },
  data() {
    return {
      testyuazhu: "计划完成率",
      xiang1: 0,
      zhanbi1: "",
      xiang2: 0,
      zhanbi2: "",
      xdata1: [],
      ydata1: [],
      xdata2: [],
      ydata2: [],

      mdata1: [],
      mdata2: [],
      mdata4: [],
      width: "600px",
      height: "260px",
      width1: "400px",
      height1: "260px",
      heightyz: "230px",
      mc: "mainyuan5",
      mc1: "mainyuan6",
      mc2: "mainyuan7",
      shanxingtu1: "shangxingtu1",
      shanxingtu2: "shangxingtu2",
      type: "circle",
      shanwidth: "400px",
      color1: ["#2D4D82", "#3068C3", "#49ACDC", "#87E9FA"],
      color2: ["#3068C3", "#49ACDC"],
      color3: ["#3068C3"],
      text1: "合同经费构成",
      text2: "经费拨付情况",
      text3: "比例完成率",
      text4: "关键技术数量",
      text5: "经典拨付比例",
      datayuan1: [],
      datayuan2: [],
    };
  },
  methods: {
    down() {
      html2canvas(this.$refs.main).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
          var aLink = document.createElement("a");
          aLink.download = "教师个人档案表";
          aLink.href = dataURL;
          aLink.click();
        }
      });
    },

    init() {
      performance().then((res) => {
        console.log(res);
        this.xiang1 = res.finish;
        this.zhanbi1 = res.finishRatio;
        this.xiang2 = res.unfinished;
        this.zhanbi2 = res.unFinishRatio;
      });
      pcRate().then((res) => {
        console.log(res, "8889999");
        this.xdata1 = res.zrdws;
        this.ydata1 = res.pcRates;
      });
      keySkill().then((res) => {
        this.xdata2 = res.domainNames;
        this.ydata2 = res.counts;
      });
      allocated().then((res) => {
        this.mdata4 = res.cydws;
        this.mdata1 = res.no;
        this.mdata2 = res.yes;
        console.log(this.mdata4, this.mdata1, this.mdata2);
      });
      scFunds().then((res) => {
        console.log(res, "____0");
        this.datayuan1 = res.data;
      });
      fundsAllocated().then((res) => {
        let a = [
          {
            name: "已支付",
            value: "",
          },
          {
            name: "未支付",
            value: "",
          },
        ];
        a[0].value = res.已支付;
        a[1].value = res.未支付;
        this.datayuan2 = a;
        console.log(a);
        // this.datayuan2 = res.data
      });
    },
  },
  watch: {},
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="less">
#e1 {
  height: 220px;
}
.el-row {
  margin-bottom: 10px;
  background-color: #fff;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-divider--vertical {
  height: 150px;
}
.white {
  height: 190px;
  background-color: #fff;
}
.black {
  background-color: #e8e9f1;
  width: 10px;
  height: 260px;
}
#p1 {
  padding-top: -20px;
}
#yuanzhu1 {
  margin-top: -20px;
}
</style>
